<template>
  <view class="order-details">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="订单"></van-nav-bar>
    <!-- #endif -->
    <scroll-view class="order-details1 flex-column" scroll-y="true" :style="styleHeight">
      <!-- 订单号 -->
      <view class="order-number">订单号：{{ data.details.startChargeSeq }}</view>
      <!-- 充电信息 -->
      <view class="details-item">
        <text class="title text-bold">充电信息</text>
        <view class="info">
          <view class="left flex-column">
            <text class="test">电站名称</text>
            <text class="test">终端编码</text>
            <text v-if="appType === 'lznt'" class="test">快捷码</text>
            <text class="test">充电车辆</text>
            <text class="test">开始时间</text>
            <text class="test">结束时间</text>
          </view>
          <view class="right flex-column">
            <text class="test">{{ data.details.stationName || '--' }}</text>
            <text class="test">{{ data.details.connectorCode }}</text>
            <text v-if="appType === 'lznt'" class="test">
              {{ data.details.shortcutCode || '--' }}
            </text>
            <text class="test">{{ data.details.plateNumber || '--' }}</text>
            <text class="test">{{ data.details.startTime }}</text>
            <text class="test">{{ data.details.endTime }}</text>
          </view>
        </view>
      </view>
      <!-- 充电费用 -->
      <view class="details-item">
        <text class="title text-bold">充电费用</text>
        <view class="info">
          <view class="left flex-column">
            <text class="test">电费</text>
            <text class="test">服务费</text>
            <text class="test">充电度数</text>
            <text class="test">订单金额</text>
          </view>
          <view class="right flex-column">
            <text class="test">
              {{ getVal4(data.details.totalElecMoney, '￥', 2) }}
            </text>
            <text class="test">
              {{ getVal4(data.details.totalServiceMoney, '￥', 2) }}
            </text>
            <text class="test">
              {{ getVal4(data.details.totalPower, '度') }}
            </text>
            <text class="test text-bold">
              {{ getVal4(data.details.totalAmount, '￥', 2) }}
            </text>
          </view>
        </view>
      </view>
      <!-- 优惠信息 -->
      <view class="details-item">
        <text class="title text-bold">优惠信息</text>
        <view class="flex-column">
          <view class="info">
            <view class="left flex-column">
              <text v-if="data.details.activitiesDiscounts" class="test">活动优惠</text>
              <view v-if="data.details.vipInterests" class="test">
                <text class="decrement">减</text>
                会员权益
              </view>
            </view>
            <view class="right flex-column">
              <text v-if="data.details.activitiesDiscounts" class="test">
                {{ getVal4(data.details.activitiesDiscounts, '￥', 2) }}
              </text>
              <text v-if="data.details.vipInterests" class="test text-red">
                {{ getVal4(data.details.vipInterests, '￥', 2) }}
              </text>
            </view>
          </view>
          <CouponItem
            v-if="data.details.vipInterests"
            class="coupon-wrap"
            :items="data.vips"
            :couponType="1"></CouponItem>
          <view class="info" @tap="tapCoupon">
            <view class="left flex-column">
              <view class="test">
                <text class="decrement">减</text>
                优惠券
              </view>
            </view>
            <view class="right flex-column">
              <view class="test text-red">
                {{ data.details.num }}张可用优惠券，去选择
                <text class="iconfont icon-arrow-right"></text>
              </view>
            </view>
          </view>
          <CouponItem
            v-show="data.selectItem"
            class="coupon-wrap"
            :items="data.selectItem"
            :couponType="2"></CouponItem>
        </view>
      </view>
      <view class="item-box"></view>
    </scroll-view>
    <!-- 底部按钮 -->
    <view class="bottom-wrap" :style="styleBottom">
      <view class="left flex-column">
        <view class="money-wrap">
          合计
          <text class="money text-bold">{{ getVal2(data.totalMoney, '￥', 2) }}</text>
        </view>
        <view class="discount">已优惠{{ getVal4(data.discountMoney, '￥', 2) }}</view>
      </view>
      <view class="right">
        <button class="bnt-wrap bnt-pay" @tap="tapPay">确认支付</button>
      </view>
    </view>

    <!--选择优惠券弹框-->
    <PopupCoupon ref="pCoupon" @set-item="setItems"></PopupCoupon>
  </view>
</template>

<script lang="ts" setup>
import { getSystemInfo, setOrderObj, setToastInstance, systemInfo } from '@mixins/info';
import CouponItem from '@/components/couponItem/couponItem.vue';
import PopupCoupon from './popupCoupon.vue';
import { getUnpaidOrder, useDiscountCoupon, payUnpaidOrder } from '@/service/apis/order';
import { getAvailableEntity } from '@/service/apis/market';
import { getVal2, getVal4 } from '@/utils/util';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});
const appType = import.meta.env.VITE_VUE_APP_TYPE;

let styleHeight = ref(`height: calc(100vh - 124rpx - ${getSystemInfo().safeBottom}px)`);

const styleBottom = `height: calc(124rpx + ${getSystemInfo().safeBottom}px)`;

// #ifdef H5
styleHeight.value = `height: calc(100vh - 124rpx - ${getSystemInfo().safeBottom}px - ${
  getSystemInfo().navHeight
}px)`;
// #endif

const data = reactive({
  details: {} as any,
  vips: {} as any,
  couponList: [] as any,
  selectItem: undefined as any,
  totalMoney: '', // 实付价格
  discountMoney: '', // 优惠价格
  isPay: false, // 是否支付
  page: '',
});

onLoad((option: any) => {
  data.page = option.page || '';
  getUnpaidOrder(option.id).then((res: any) => {
    data.details = res;
    data.totalMoney = res.actualAmount;
    data.discountMoney = getVal4(Number(res.totalAmount) - Number(res.actualAmount));
    // data.discountMoney = getVal4(
    //   Number(res.activitiesDiscounts) +
    //     Number(res.vipInterests || 0) +
    //     Number(res.discountCoupon || 0) +
    //     Number(res.zeroDiscount || 0)
    // );
    data.vips = {
      discount: res.discount,
      name: res.vipName,
      discountType: res.vipType,
    };

    const obj = {
      stationId: res.stationId,
      powerAmount: res.elecMoneyActual, //res.totalElecMoney,
      serviceAmount: res.serviceMoneyActual, // res.totalServiceMoney,
      chargeStartTime: res.startTime,
      chargeEndTime: res.endTime,
    };
    getAvailableEntity(obj).then((res1: any) => {
      data.details.num = res1?.length || 0;
      data.couponList = res1 || [];
    });
  });
});

//选项优惠券
const pCoupon = ref();
const tapCoupon = () => {
  if (data.couponList.length > 0) {
    pCoupon?.value?.open(data.couponList);
  }
};

const setItems = (item: any) => {
  data.selectItem = item;
  if (!item) {
    data.totalMoney = data.details.actualAmount;
    data.discountMoney = getVal4(
      Number(data.details.totalAmount) - Number(data.details.actualAmount)
    );
    return;
  }
  const obj = {
    discountRequest: { ...item },
    startChargeSeq: data.details.startChargeSeq,
  };
  useDiscountCoupon(obj).then((res: any) => {
    data.totalMoney = res.amountActually;
    data.discountMoney = res.discountAmount;
  });
};

//确认支付
const tapPay = () => {
  const obj = {
    discountRequest: { ...data.selectItem },
    startChargeSeq: data.details.startChargeSeq,
  };
  payUnpaidOrder(obj).then((res: any) => {
    uni.showModal({
      content: '支付成功',
      showCancel: false,
      success: () => {
        data.isPay = true;
        setOrderObj({ pageType: 'history' });
        uni.reLaunch({
          url: `/pages/order/order`,
        });
        // uni.navigateBack();
      },
    });
  });
};

onUnload(() => {
  uni.$emit('pageType', data.isPay ? 'history' : '');
});

// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss">
@import './details.scss';
</style>